Codes

Updated at 2021.1.2 Updated at 2020.10.30 Updated at 2020.09.28

Intro

Visual Studio Code (VSCode)를 기존에 Python 코딩 등에 쓰고 있었지만, Markdown을 알게 되고 배우면서 편집을 VSCode에서 하다보니, 마치 새로운 세상에 눈을 뜬 것 같은 느낌이었다. VSCode의 많은 Extensions들을 활용하면서, 생산성을 높이기 위해 기존에 고민했던 일들을 손쉽게 해결할 수 있게 되었다.

What is Markdown

HTML Markup 언어로 웹 문서를 만들 수 있지만, 사용하기가 번거롭다. 문법을 잘 아는 것과 그것을 활용하여 빠른 속도로 편집을 하는 것은 별개다. Markdown은 비교적 쉽고 빠르게 잘 구조화된 HTML에 버금가는 문서를 만들 수 있다. 확장자는 .md이다.

Markdown 사용법을 한글로 쉽게 정리해 놓은 다음 사이트를 참고하면 기본적인 사항은 바로 알 수 있을 것이다.

Markdown 사용법 총정리

VSCode에서는 Markdown 문서를 쉽게 편집할 수 있고, Markdown All in One 이라는 확장기능(Extension)을 설치하면 PDF 및 HTML 문서로도 쉽게 변환이 가능하다. 설치된 확장기능은 VSCode의 Command Palette (Ctrl+Shift+P) 메뉴를 활용하면 호출해서 쉽게 쓸 수 있다.

Markdown Usage

VSCode의 Markdown 관련 Extension 중 가장 활용도가 높다고 생각되는 Markdown All in One 을 설치하자. 그리고 문서 작성 생산성을 높이기 위한 중요하고 핵심적인 기능만 알아보자.

Headings

Heading으로 지정된 문장을 자동으로 제목으로 뽑아서 만들어 주는 기능은 정말 편한다. Markdown All in One의 TOC (Table of Contents) 기능은 파일이 저장될 때 자동으로 업데이트 해준다.

• Markdown All in One: Create Table of Contents
• TOC로 정리 안되도록 하려면 Heading 마지막에 <!-- omit in toc -->을 추가한다.
• Markdown All in One: Add/Update section numbers 각 제목의 Section에 Numbering을 자동으로 추가 및 제거, 업데이트 할 수 있다.

Equations

자세한 사용법은 Markdown+Math를 참고하면 되는데 가장 기본적인 것만 알고가자.

• 문법은 KaTex 수식 입력을 참고하면 되고,
• 문장에 인라인으로 쓸 때는 $...$ 를,
• 단독 문장으로는 $$...$$,
• 그 뒤에 수식의 넘버링을 나타낼 때는 $$...$$ (1) 등으로 나타내면 된다. Markdown+Math를 설치해야만 작동한다(2020.09.27 현재).
• 수식의 크기를 변경할 때는 \large{}를 추가하고 중괄호 안에 원하는 수식을 넣으면 된다. 사용 가능한 키워드는 사이즈 순으로 다음과 같다.
  • Huge, huge, LARGE, Large, large, normalsize, small, footnotesize, scriptsize, tiny

예제로 해보면 문장내에 삽입하면 \(e=mc^2\) 와 같이 나타나고, 근의 공식을 한 문장으로 쓰면 다음과 같다. (Huge, large, tiny)

\begin{align}\Huge{\frac{-b + \sqrt{b^2 - 4ac}}{2a}}\end{align}

\begin{align}\large{\frac{-b + \sqrt{b^2 - 4ac}}{2a}}\end{align}

\begin{align}\tiny{\frac{-b + \sqrt{b^2 - 4ac}}{2a}}\end{align}

Images

이미지를 삽입할 때는 ![Test](images/numbers2.png)와 같이 링크를 삽입할 때와 같은데 앞에 따옴표를 넣으면 된다. 현재까지 이미지 사이즈를 변경할 수 있는 방법을 못 찾았고, 그렇게 하고 싶은 경우는 마크업인 <img> Tag를 활용해야 한다.

Tips

웹사이트를 개설해 웹 문서로 올릴 경우는 이미지가 wwwroot/images/ 아래에 있다고 가정하고 md 파일이 있는 폴더 바로 아래에 images 폴더를 만들고 이미지를 복사해 놓으면, 업로드후 링크가 깨지는 것을 방지할 수 있다. 참고로 파일 명은 대소문자 구분 안한다.

Codes

• 문장 내에서 코드를 쓸 때는 ` (키보드에 가장 왼쪽 위에 있는 키)를 한 개,
• 문장으로 쓸 때는 세 개를 (```) 동시에 쓰면되고,
• 문장인 경우 코드의 종류도 입력할 수 있다. html, css, javascript, bash, python, csharp, ...

Tables

HTML Markup에서는 복잡해서 웹 문서에 테이블을 잘 쓰지 않았는데, 쉽게 테이블을 만들 수 있다.

• 기본적으로 |를 테이블의 구분 기준으로 사용 가능
• 헤더 셀을 구분할 때는 수평선과 같이 3개 이상의 - 사용
  • 정렬 방식을 구분할 때는 : 기호로 활용하면 됨.
  • 예를 들어 무정렬, 왼쪽, 오른쪽 정렬을 하고 싶을 때 |---|:---|---:|
• 가장 왼쪽와 오른쪽의 |은 생락 가능

Converting to HTML

• Markdown All in One: Print current document to HTML 메뉴를 활용하면 바로 가능하다.

Changing Style of Preview

• markdown.styles에 다음 css 파일을 등록하고, md파일이 있는 디렉토리에 그 css 파일을 복사해놓는다.
• Markdown Preview Enhanced Extension을 설치하여 Preview를 향상시킬 수 있다.

Most Popular #3

Recent #3